<template>
    <div class="add-auth">
        <Form
            ref="addForm"
            :model="form"
            :rules="diyData.rules"
            :label-width="100"
        >
            <div class="tag-title">{{ query.id ? '编辑' : '添加' }}菜单</div>
            <FormItem label="标题" prop="title">
                <Input clearable 
                    v-model="form.title"
                    placeholder="请输入标题"
                    style="width: 440px"
                ></Input>
            </FormItem>
            <FormItem label="上级菜单" prop="parent_id">
                <Select clearable  v-model="form.parent_id" style="width: 440px">
                    <Option label="顶级菜单" value="0"></Option>
                    <Option v-for="item in apiData.parentList" :value="item.id" :key="item.id">{{ item.title }}</Option>
                </Select>
            </FormItem>
            <FormItem label="菜单路径" prop="uri">
                <Input clearable 
                    v-model="form.uri"
                    placeholder="请输入菜单路径"
                    style="width: 440px"
                ></Input>
            </FormItem>
            <FormItem label="菜单图标">
                <Input clearable 
                    v-model="form.icon"
                    placeholder="请输入菜单图标"
                    style="width: 440px"
                ></Input>
            </FormItem>
            <FormItem label="排序" prop="sort">
                <Input clearable 
                    v-model="form.sort"
                    placeholder="请输入排序"
                    type="text"
                    style="width: 440px"
                ></Input>
                <div class="tips">*数字越小排序越靠前</div>
            </FormItem>
        </Form>
        <Button
            type="primary"
            style="width: 90px; margin-right: 20px"
            @click="submit"
        >
            保存
        </Button>
        <Button style="width: 90px" @click="$router.go(-1)">
            取消
        </Button>
    </div>
</template>

<script>
import {
    apiMenuList,
    apiMenuUpdate,
    apiMenuDetail,
    apiMenuAdd
} from '@/api/admin';

export default {
    name: '',
    data() {
        return {
            query: {},
            search: {},
            diyDom: {},
            // 表单数据
            form: {
                title: '',
                uri: '',
                parent_id: '',
                sort: '',
                icon: ''
            },
            diyData: {
                rules: {
                    title: [{required: true, message: '标题不能为空', trigger: 'blur'}],
                    uri: [{required: true, message: '菜单路径不能为空', trigger: 'blur'}],
                    parent_id: [{required: true, message: '上级菜单不能为空', trigger: 'change'}],
                    icon: [{required: true, message: '菜单图标不能为空', trigger: 'blur'}]
                }
            },
            apiData: {
                parentList: [],
                authDetails: {}
            }
        };
    },
    methods: {
        // 获取新增或修改的菜单列表
        getDetail() {
            this.$store.commit('setSpinShow', true);
            apiMenuDetail(this.query.id).then(res => {
                const {icon, sort, title, uri, parent_id} = res;
                this.form.icon = icon;
                this.form.sort = sort + '';
                this.form.title = title;
                this.form.uri = uri;
                this.form.parent_id = parent_id + '';
            }).finally(() => this.$store.commit('setSpinShow', false));
        },
        // 获取菜单列表
        getMenuList() {
            apiMenuList().then(res => {
                this.apiData.parentList = this.iteratorMenu(res);
                this.apiData.parentList = this.apiData.parentList.map(item => {
                    return {
                        ...item,
                        id: item.id + ''
                    };
                });
            });
        },
        // 迭代菜单
        iteratorMenu(menu) {
            let target = [];
            menu.forEach(item => {
                if (item.children && item.children.length > 0) {
                    target.push(item);
                    item.children.forEach(citem => {
                        target.push(citem);
                    });
                } else {
                    target.push(item);
                }
            });
            return target;
        },
        submit() {
            this.$refs['addForm'].validate((valid) => {
                if (valid) {
                    const opt = {...this.form};
                    if (this.query.id) {
                        this.$store.commit('setSpinShow', true);
                        apiMenuUpdate(this.query.id, opt).then(
                            (res) => {
                                this.$Message.success(
                                    '编辑成功'
                                );
                                this.$router.push({
                                    name: 'auth-manage'
                                });
                            }
                        ).finally(() => this.$store.commit('setSpinShow', false));
                    } else {
                        this.$store.commit('setSpinShow', true);
                        apiMenuAdd(opt).then(
                            (res) => {
                                this.$Message.success('新增成功');
                                this.$router.push({name: 'auth-manage'});
                            }
                        ).finally(() => this.$store.commit('setSpinShow', false));
                    }
                }
            });
        }
    },
    mounted() {
        this.query = this.$route.query;
        // 获取菜单列表
        // this.getMenuList();
        // this.query.id && this.getDetail();
    }
};
</script>

<style scoped lang="less">
.add-auth {
    border: 1px solid #ededed;
    margin: 0 20px;
    padding: 26px 20px;

    .title {
        border-left: 5px solid #2d8cf0;
        padding: 0 0 0 10px;
        margin: 0 20px 20px;
        font-weight: bold;
    }

    .look-img {
        display: flex;
        align-items: center;
        width: 100px;
        height: 100px;
        border: 1px dashed rgba(197, 197, 197, 1);
        text-align: center;
        justify-content: space-evenly;
        position: relative;
        overflow: hidden;
    }

    .demo-upload-list-cover {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.6);
        text-align: center;
    }

    .look-img:hover .demo-upload-list-cover {
        display: block;
    }

    .demo-upload-list-cover i {
        line-height: 98px;
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }

    .demo-spin-icon-load {
        animation: ani-demo-spin 1s linear infinite;
    }
}
</style>
